<template>
  <a-card :title="t('数据表字段')" size="small">
    <dys-table
      :columns="columns"
      :data-source="state.list"
      :loading="state.loading"
      :pagination="false"
      hide-right-tool
      :custom-row="() => ({ align: 'center' })"
    >
      <template #extraLeft>
        <a-button type="primary" @click="handleAdd">
          <PlusCircleOutlined />{{ t("新增") }}
        </a-button>
      </template>
      <template #headerCell="{ title, column }">
        <span
          :class="{
            'header-cell-required': [
              'fieldCode',
              'fieldType',
              'fieldDesc',
            ].includes(column.dataIndex),
          }"
          >{{ title() }}</span
        >
      </template>
      <template #bodyCell="{ column, record, index }">
        <a-input
          v-if="column.dataIndex == 'fieldCode'"
          v-model:value="record.fieldCode"
          :placeholder="t('请输入字段名')"
          :disabled="record.disabled"
          size="small"
          allow-clear
        ></a-input>
        <field-type-select
          v-else-if="column.dataIndex == 'fieldType'"
          v-model:value="record.fieldType"
          :disabled="record.disabled"
          size="small"
        ></field-type-select>
        <a-input-number
          v-else-if="column.dataIndex == 'fieldLength'"
          v-model:value="record.fieldLength"
          :placeholder="t('请输入长度')"
          :disabled="record.disabled"
          :style="{ color: record.disabled ? '#999999' : '#000000' }"
          allow-clear
          size="small"
        ></a-input-number>
        <a-input-number
          v-else-if="column.dataIndex == 'digit'"
          v-model:value="record.digit"
          :placeholder="t('请输入小数点位数')"
          :disabled="record.disabled"
          allow-clear
          size="small"
        ></a-input-number>
        <a-checkbox
          v-else-if="column.dataIndex == 'notNull'"
          :checked="record.notNull == 'Y'"
          :disabled="record.disabled"
          @update:checked="(v) => (record.notNull = v ? 'Y' : 'N')"
        ></a-checkbox>
        <a-checkbox
          v-else-if="column.dataIndex == 'isPrimary'"
          :checked="record.isPrimary == 'Y'"
          :disabled="record.disabled"
          @update:checked="
            (v) => {
              record.isPrimary = v ? 'Y' : 'N';
              record.notNull = record.isPrimary == 'Y' ? 'Y' : record.notNull;
            }
          "
        ></a-checkbox>
        <a-input
          v-else-if="column.dataIndex == 'fieldDesc'"
          v-model:value="record.fieldDesc"
          :placeholder="t('请输入字段描述')"
          :disabled="record.disabled"
          size="small"
          allow-clear
        ></a-input>
        <a-button
          v-else-if="column.dataIndex == 'operation' && !record.disabled"
          size="small"
          type="link"
          danger
          @click="state.list.splice(index, 1)"
        >
          {{ t("删除") }}
        </a-button>
      </template>
    </dys-table>
  </a-card>
</template>
<script lang="ts" setup>
import { reactive, watch } from "vue";
import { useI18n } from "vue-i18n";
import { baseFields } from "..";
import type { TableColumnsType } from "ant-design-vue";
import type { QueryResult } from "@/api/low-code/table/typing";
import FieldTypeSelect from "@/views/low-code/widgets/field-type-select/index.vue";
import { queryFields } from "@/api/low-code/table";
interface Props {
  /**行数据 */
  model: QueryResult;
}
const props = defineProps<Props>();
const { t } = useI18n();
const columns = reactive<TableColumnsType>([
  { title: () => t("字段名"), dataIndex: "fieldCode", width: 160 },
  { title: () => t("类型"), dataIndex: "fieldType" },
  { title: () => t("长度"), dataIndex: "fieldLength", width: 50 },
  { title: () => t("小数点"), dataIndex: "digit", width: 50 },
  { title: () => t("不是null"), dataIndex: "notNull", width: 100 },
  { title: () => t("主键"), dataIndex: "isPrimary", width: 50 },
  { title: () => t("字段描述"), dataIndex: "fieldDesc", width: 160 },
  { title: () => t("操作"), dataIndex: "operation", width: 50, fixed: "right" },
]);

/**字段表状态 */
const state = reactive({
  loading: false,
  list: [...baseFields],
});
/**新增 */
const handleAdd = () => {
  state.list.splice(-6, 0, {
    fieldCode: null,
    fieldType: null,
    fieldLength: null,
    digit: null,
    notNull: "N",
    isPrimary: "N",
    fieldDesc: null,
    disabled: false,
  });
};
/**查询数据表字段 */
const query = async () => {
  const { success, result } = await queryFields({
    tableId: props.model?.tableId,
  });
  if (success) {
    state.list = result;
  }
};
watch(
  () => props.model,
  (model) => {
    if (model) {
      query();
    } else {
      state.list = [...baseFields];
    }
  },
  { immediate: true }
);
defineExpose({ state });
</script>
<style lang="less" scoped>
:deep(.ant-input-number-input) {
  color: inherit;
}
</style>
